<template>
    <div class="vip-page">
        <!--首页头-->
        <VipHeader class="header"/>
        <div class="common_container" v-if="!login_flag || user_data.vip_type==='普通会员'">
            <div class="content_body">
                <h3>
                    <div class="content_title">
                        <span class="font-vip">开通会员 </span>
                    </div>
                </h3>
                <div class="vip-card" v-for="product in product_info_list">
                    <!--                    <div class="vip-card-title">{{product.name}}</div>-->
                    <h3 class="vip-card-title">{{product.name}}</h3>
                    <div>
                        <span>￥ </span>
                        <span class="vip-card-real-price">{{product.real_price}} </span>
                        <span class="vip-card-price"> {{product.price}}</span>
                    </div>
                    <div class="vip-card-btn">
                        <span class="vip-btn mybtn" @click="get_pay_type();pay_product=product">{{product.name}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="menu">
            <div class="common_container">
                <span class="menu-tag" :class="filter.ordering=='-order' ? 'tag-selectd':''"
                      @click="filter.ordering='-order'">
                    默认
                </span>
                <span class="menu-tag" :class="filter.ordering=='-pub_time' ? 'tag-selectd':''"
                      @click="filter.ordering='-pub_time'">
                    最新
                </span>
                <span class="menu-tag" :class="filter.ordering=='-score' ? 'tag-selectd':''"
                      @click="filter.ordering='-score'">
                    最好
                </span>
                <span class="menu-tag" :class="filter.ordering=='-heat' ? 'tag-selectd':''"
                      @click="filter.ordering='-heat'">
                    最热
                </span>
            </div>
        </div>
        <div class="content clearfix common_container">
            <div class="content_body">
                <div class="content_title">
                    <h3>
                        <span class="font-vip">VIP </span>
                        <span>正在热播</span>
                    </h3>
                </div>
                <div class="video-card" v-for="(item, i) in video_info_list" :class="i+1===5?'margin-right0':''">
                    <a :href="`/video/${item.video_id}`">
                        <div class="card-image">
                            <img :src="item.image_url" class="image">
                            <div class="tag free-tag" v-if="item.is_free">
                                免费
                            </div>
                            <div class="tag vip-tag" v-else>
                                VIP
                            </div>
                            <span class="card-info score">{{item.score}}</span>
                        </div>
                    </a>
                    <div class="card-content">
                        <a href="/">
                            <span class="content-title">{{item.title}}</span>
                        </a>
                        <span class="heat"><span class="glyphicon glyphicon-fire"></span> {{item.heat}}</span>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="请选择支付方式" :visible.sync="PaydialogVisible" width="30%">
            <div class="pay_dialog">
                <el-radio v-model="pay_type" label="1">
                    <div class="pay_img alipay"><img src="../assets/img/alipay.png" alt=""></div>
                </el-radio>
                <el-radio v-model="pay_type" label="2" disabled>
                    <div class="pay_img watchpay"><img src="../assets/img/wechat_pay.png" alt=""></div>
                </el-radio>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="PaydialogVisible = false;pay_product={}">取 消</el-button>
                <el-button type="primary" @click="PaydialogVisible = false;get_vip_order()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import VipHeader from "../components/VipHeader"

    export default {
        name: "VipPage",
        data() {
            return {
                // 用户是否登陆
                login_flag: false,
                // 用户数据
                user_data: this.$cookies.get("user_info"),
                user_detail_data: [],
                filter: {   // 过滤条件
                    ordering: "-order"
                },
                product_info_list: [], // 商品信息列表
                video_info_list: [], // 视频信息列表
                PaydialogVisible: false, // 支付弹框
                pay_type: "1", // 支付方式,value是name
                allow_pay: false,   // 是否允许支付
                pay_product: {}, // 支付的商品
            }
        },
        components: {
            VipHeader,
        },
        methods: {
            // 获取用户信息
            get_user_info() {
                if (this.user_data && this.$cookies.get("token")) {
                    this.login_flag = true;
                    this.get_user_vip_type()
                }
            },
            // 获取用户详细信息
            get_user_vip_type(){
                // 获取信息
                this.$axios({
                    url : `${this.$settings.base_url}/user/type`,
                    method: "post",
                    headers: {
                        "AUTHORIZATION":`JWT ${this.$cookies.get("token")}`   // 请求token
                    }
                }).then(response => {
                    this.user_data.vip_type = response.data.get_vip_type;
                    this.$cookies.set("user_info", this.user_data);
                    // console.log(response.data.get_vip_type)
                }).catch(() => {
                    let _this = this;
                    _this.$alert("获取个人信息有误，请联系客服工作人员", "未知错误", {
                        callback() {
                            _this.$router.push("/")
                        }
                    });
                })
            },
            // 获取商品信息
            get_product_info() {
                // 获取信息
                this.$axios.get(`${this.$settings.base_url}/order/product`).then(response => {
                    this.product_info_list = response.data;
                }).catch(() => {
                    this.$message({
                        message: "获取商品信息有误，请联系客服工作人员",
                    })
                })
            },
            // 获取VIP视频
            get_vip_video() {
                // 定义过滤数据
                let filters = {
                    ordering: this.filter.ordering, // 排序
                };
                // 获取信息
                this.$axios.get(`${this.$settings.base_url}/video/vip_video`, {
                    params: filters // 请求参数
                }).then(response => {
                    this.video_info_list = response.data;
                    // console.log(this.video_info_list)
                }).catch(() => {
                    this.$message({
                        message: "获取电影信息有误，请联系客服工作人员",
                    })
                })
            },
            // 获取支付方式
            get_pay_type() {
                if (!this.login_flag) {
                    this.$alert("如需购买vip会员，请先登陆", "请先登陆");
                } else if (this.user_data.vip_type !== '普通会员') {
                    this.$alert("您已经是会员啦！我们可是良心商家哦！", "您已经是会员啦!");
                } else {
                    this.PaydialogVisible = true
                }
            },
            // 获取vip订单
            get_vip_order(){
                // 已登录
                this.$axios({
                    url: this.$settings.base_url + '/order/pay',
                    method: 'post',
                    data:{
                        subject : this.pay_product.name,
                        real_price : this.pay_product.real_price,
                        price : this.pay_product.price,
                        pay_type : this.pay_type,
                        product_pk : this.pay_product.id,
                        vip_type: this.pay_product.vip_type,
                    },
                    headers: {
                        authorization : `JWT ${this.$cookies.get("token")}`,
                    }
                }).then(response =>{
                    console.log(response.data);
                    // 拿到支付的url
                    let pay_url = response.data.results;
                    // 打开支付网页
                    window.open(pay_url, "_self")
                }).catch(error=>{
                    console.log(error.response.data)
                })
            },
        },
        created() {
            this.get_user_info();
            this.get_product_info();
            this.get_vip_video();
        },
        watch: {
            "filter.ordering": function () {
                this.get_vip_video()
            },
            "$store.state.userinfo": function () {
                this.user_data = this.$cookies.get("user_info");
                if (this.user_data && this.$cookies.get("token")) {
                    this.login_flag = true;
                }
            }
        }

    }
</script>

<style scoped>
    .vip-page {
        clear: both;
    }

    .header {
        background: white;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
        position: relative;
    }

    .common_container {
        margin: 0 130px;
    }

    .menu {
        position: relative;
        margin: 30px 0;
        background: #f6f6f6;
        height: 40px;
        line-height: 40px;
    }

    .menu-tag {
        display: inline-block;
        color: #333;
        font-size: 13px;
        line-height: 28px;
        margin-right: 15px;
        margin-left: 5px;
    }

    .menu-tag:hover {
        cursor: pointer;
        color: #1f82fc;
    }

    .tag-selectd {
        border-bottom: 5px solid #1f82fc;
    }

    .font-vip {
        color: #dab176;
    }

    .content_body {
        height: 100%;
        margin-bottom: 30px;
    }

    .content_title {
        margin: 30px 0;
    }

    .video-card {
        width: 16.5%;
        height: 300px;
        display: inline-block;
        /*padding: 5px;*/
        margin-right: 55px;
    }

    .card-image {
        padding: 10px 5px;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .tag {
        position: absolute;
        float: right;
        right: 5%;
        top: 5px;
        color: white;
        font-size: 12px;
        text-align: center;
        width: 33px;
    }

    .vip-tag {
        background: #ebba73;
    }

    .free-tag {
        background: #fc4273;
    }

    .card-info {
        position: absolute;
        float: right;
        top: 88%;
        right: 6%;
        font-size: 16px;
        font-weight: 700;
    }

    .score {
        color: #ff5711;
    }

    .status {
        font-size: 12px;
        line-height: 20px;
        color: #fff;
        background: rgba(0, 0, 0, .6);
        padding: 0 10px;
        border-radius: 10px;
    }

    .heat {
        float: right;
        margin-right: 7px;
        font-size: 14px;
        line-height: 25px;
        color: #ff6200;
    }

    .content-title {
        font-weight: 700;
        color: #333;
        font-size: 15px;
        margin-left: 5px;
    }

    .content-title:hover {
        color: #0d9bff;
    }

    .content img {
        border-radius: 5px;
        width: 100%;
        height: 100%;
        /*transition: all .5s ease-in-out;*/
        transition: all .5s linear;
        opacity: 3;
        background: linear-gradient(0.2deg, transparent, rgba(0, 0, 0, .6));
    }

    .content img:hover {
        /*transform: scale(1.1);*/
        transform: translateY(-7px);
        box-shadow: 0 0 6px #000;
    }

    .vip-card {
        margin: 10px 40px;
        padding: 10px 0 20px;
        background: rgba(235, 186, 73, 0.45);
        display: inline-block;
        width: 18%;
        text-align: center;
    }

    .vip-card-title {
        font-size: 24px;
        color: #292620;
        margin-bottom: 20px;
    }

    .vip-card-real-price {
        font-size: 26px;
    }

    .vip-card-price {
        text-decoration: line-through;
    }

    .vip-card-btn {
        margin: 20px 0 10px;

    }

    .vip-btn {
        padding: 8px 30px;
        border-radius: 20px;
        background: #e5cca2;
        color: #333;
    }

    .mybtn:hover {
        cursor: pointer;
        color: white;
    }
    .pay_dialog{
        padding: 30px 0;
        border-top: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
    }
    .pay_img{
        height: 42px;
        display: inline-block;
        margin-right: 10px;
    }
    .alipay{
        width: 120px;
    }
    .watchpay{
        width: 170px;
    }
    .pay_img img{
        width: 100%;
        height: 100%;
    }
</style>